<template>
  <div class="mine">
    <header>
      <div class="hs">
        <van-notice-bar
          color="#fff"
          background="#e26a3c"
          left-icon="volume-o"
          text="戴口罩，勤洗手；少聚集，勤通风；健康你我他，防疫靠大家"
        />
        <van-icon @click="xx" class="news" name="comment" color="#fff" dot />
      </div>
      <div class="hx">
        <div class="left" @click="clickHandle">
          <img
            :src="info.avatar ? info.avatar : touxiang"
            alt="111"
            v-show="touxiang"
          />
        </div>
        <div class="right">
          <router-link :to="{ name: 'Login' }">
            <div style="color:#fff">
              {{ info.userName ? info.userName : "登录/注册" }}
            </div>
          </router-link>
          <div class="rx">
            <div>{{ info.nickName ? info.nickName : "匿名" }}</div>
            <div class="hy">
              <van-icon name="gem" color="#7E4D0E" />会员积分
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="con">
      <router-link :to="{ name: 'Order' }">
        <div class="order">
          <div class="ol">我的订单</div>
          <div class="or">
            全部订单
            <van-icon name="arrow" color="#999" />
          </div>
        </div>
      </router-link>
      <div class="con-x">
        <router-link :to="{ name: 'Order' }">
          <div>
            <van-icon name="pending-payment" color="#999" badge="1" />
            <span>待付款</span>
          </div>
        </router-link>
        <div>
          <van-icon name="logistics" color="#999" />
          <span>待收货</span>
        </div>
        <div>
          <van-icon name="more-o" color="#999" />
          <span>待评价</span>
        </div>
        <div>
          <van-icon name="exchange" color="#999" />
          <span>退换/售后</span>
        </div>
      </div>
    </div>
    <img
      class="bigpic"
      src="../../../public/image/9EX9U]Y2EY9C_Y)8`(WQTND.png"
      alt=""
    />
    <div class="ops">
      <div class="op1">
        <van-icon class="pic" name="coupon" color="#FF703A" />
        <div class="op1-r" @click="showList = true">
          <div>优惠劵</div>
          <van-icon name="arrow" color="#999" />
        </div>
        <!-- 优惠券列表 -->
        <van-popup
          v-model="showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px;"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
      </div>
      <div class="op1">
        <van-icon class="pic" name="flower-o" color="#FF9500" />
        <div class="op1-r">
          <div>会员福利</div>
          <van-icon name="arrow" color="#999" />
        </div>
      </div>
      <div class="op1">
        <van-icon class="pic" name="card" color="#40AEFC" />
        <div class="op1-r" style="border:0">
          <div>我的钱包</div>
          <van-icon name="arrow" color="#999" />
        </div>
      </div>
    </div>
    <div class="ops">
      <div class="op1">
        <van-icon class="pic" name="manager" color="#F5574E" />
        <div class="op1-r">
          <div>服务中心</div>
          <van-icon name="arrow" color="#999" />
        </div>
      </div>
      <div class="op1">
        <van-icon class="pic" name="shop" color="#FF9500" />
        <div class="op1-r">
          <div>小米之家</div>
          <van-icon name="arrow" color="#999" />
        </div>
      </div>
      <div class="op1">
        <van-icon class="pic" name="weapp-nav" color="#96C338" />
        <div class="op1-r" style="border:0">
          <div>更多功能</div>
          <van-icon name="arrow" color="#999" />
        </div>
      </div>
    </div>
    <div class="op1" style="border-bottom:1px solid #f5f5f5">
      <van-icon class="pic" name="setting" color="#889BB3" />
      <div class="op1-r" style="border:0">
        <div>设置</div>
        <van-icon name="arrow" color="#999" />
      </div>
    </div>
    <button class="btn" @click="logout">退出</button>
  </div>
</template>

<script>
import { infoApi } from "../../api/user";
import { removeToken } from "../../utils/auth";
import { Dialog } from "vant";
import { Notify } from "vant";
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠300元",
  reason: "",
  value: 150,
  name: "月饼优惠券",
  startAt: 1609104000,
  endAt: 1634592000,
  valueDesc: "150",
  unitDesc: "元",
};
export default {
  components: {},
  data() {
    return {
      touxiang: require("../../../public/image/header.png"),
      tx: true,
      info: {},
      showList: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
    };
  },
  computed: {},
  watch: {},
  methods: {
    xx() {
      Notify("正在施工");
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange() {
      this.coupons.push(coupon);
    },
    clickHandle() {
      this.$router.push({
        path: "/xg",
        name: "Xg",
        params: {
          nickName: this.info.nickName ? this.info.nickName : "匿名",
          avatar: this.info.avatar ? this.info.avatar : this.touxiang,
          opsw: this.info.password,
        },
      });
    },
    logout() {
      Dialog.alert({
        title: "提示",
        className: "logout",
        message: "是否确认退出？",
      }).then(() => {
        removeToken(this.info);
      });
    },
  },
  async created() {
    const res = await infoApi();
    this.info = res.data;
    console.log(this.info);
  },
  mounted() {},
};
</script>
<style scoped>
.mine {
  margin-bottom: 50px;
}
/* header */
header {
  width: 100%;
  height: 20%;
  background-color: #e26a3c;
}
.news {
  font-size: 22px;
  margin-left: 337px;
}
.hx {
  display: flex;
  margin-left: 14px;
}
.left {
  margin-bottom: 26px;
}
.left img {
  width: 56px;
  height: 56px;
  border-radius: 28px;
}
.right {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 26px;
  margin-left: 5px;
  color: #fff;
}
.rx {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #efa88e;
  font-size: 14px;
}
.hy {
  width: 88px;
  height: 30px;
  background-color: #ffbe00;
  color: #7e4d0e;
  border-radius: 15px 0 0 15px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 13px;
}
/* con */
.con {
  height: 117px;
}
.order {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 41px;
  border-bottom: 1px solid #f2f2f2;
}
.ol {
  margin-left: 14px;
  color: #505050;
}
.or {
  margin-right: 12px;
  font-size: 13px;
  color: #bab4ae;
  display: flex;
  justify-content: center;
  align-items: center;
}
.con-x {
  display: flex;
  justify-content: space-around;
}
.con-x div {
  height: 75px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.con-x div .van-info {
  height: 16px;
}
.con-x .van-icon {
  font-size: 28px;
}
.con-x span {
  display: block;
  color: #999;
  font-size: 13px;
}
/* 图片 */
bigpic {
  border-bottom: 8px solid #f5f5f5;
  line-height: 104px;
  text-align: center;
}
/* 选项卡 */
.op1 {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}
.op1 .pic {
  margin-left: 15px;
  font-size: 28px;
}
.op1-r {
  width: 85%;
  padding-right: 9px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 28px;
  margin-left: 10px;
  padding-bottom: 9px;
}
.ops {
  border-bottom: 8px solid #f5f5f5;
}
.btn {
  border: 0;
  background-color: orangered;
  color: #fff;
  width: 100%;
  height: 50px;
  margin: 0 auto;
}
</style>
